<script setup lang="ts">
  import useSettingStore from '@/store/modules/setting'
  const settings = useSettingStore()

</script>

<template>
  <div class="appConter">
    <van-config-provider :theme="settings.themeVal" theme-vars-scope="global">
      <GlobalLoading />
      <div class="header" v-if="settings.isHeaderShow">
        <Header></Header>
      </div>
      <div class="main">
        <router-view v-slot="{ Component, route }">
          <!-- <transition :name="route.meta.transitionName"> -->
            <keep-alive v-if="route.meta.keepAlive">
              <component :is="Component" :key="route.path" />
            </keep-alive>
            <component v-else :is="Component" :key="route.path" />
          <!-- </transition> -->
        </router-view>
      </div>
      <Tabs></Tabs>
    </van-config-provider>
  </div>
</template>

<style lang="scss" scoped>
.appConter {
  color: var(--text-color);
  /* .van-theme-dark body {
      text-color: #f5f5f5;
      background-color: black;
  } */
  width: 100vw;
  height: 100vh;
  .header {
    width: 100%;
    height: 50px;
  }
  .main {
    /* 进入和离开的过渡状态 */
    .fade-enter-active,
    .fade-leave-active {
      transition: opacity 0.5s ease;
    }
    
    /* 进入前和离开后的状态 */
    .fade-enter-from,
    .fade-leave-to {
      opacity: 0;
    }
    
    /* 进入后和离开前的状态 */
    .fade-enter-to,
    .fade-leave-from {
      opacity: 1;
    }
  }
}

</style>
